<!DOCTYPE html>

<html>
<head>
    <title>Paul Walter</title>
    
    <!-- META -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="Paul Walter, Rochester Institute of Technology, rochester institute of technology, Rit, RIT, rit, academic, Academic" />
    <meta name="description" content="Paul Walter&apos;s Academic Portfolio. Collected school work and other projects..." />
    
    
     <!-- LINKS -->
    <link rel="SHORTCUT ICON" href="images/walterpFavIcon.gif"/>
    <link rel="stylesheet" type="text/css" href="css/css_reset.css">
    <link rel="stylesheet" type="text/css" href="css/walterp-site1.css">
    <link rel="stylesheet" type="text/css" href="css/animated_clouds.css">
	
    <link href="javascript/lightbox/css/lightbox.css" rel="stylesheet" />
	
</head>

<body>

	<!-- Animated Clouds modified from http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background -->
	<div id="clouds">
		   	<div class="cloud x1"></div>
			<div class="cloud x2"></div>
			<div class="cloud x3"></div>
			<div class="cloud x4"></div>
			<div class="cloud x5"></div>
			<div class="cloud x6"></div>
			<div class="cloud x7"></div>
	</div>

	<!-- Audio recorded by Mike Koenig -->
	<audio autoplay loop>
	  <source src="assets/sounds/Ocean_Waves-Mike_Koenig-980635527.mp3" type="audio/mpeg">
	</audio>
		    
	<!-- MAIN CONTAINER -->
	<div id="container">
	    
		<!-- HEADER -->
		<div id="header">
		    
		    
		</div>
		
		<!-- PRIMARY NAVIGATION -->
		<ul id="nav_primary" class="nav" data-bind="foreach: modes">
			
			<!-- NOTE: 	The following data-bind expression: "nav_primary_selected: $data.header == $root.chosenMode().header"
					applies a CSS class called "nav_primary_selected" -->
			
			<li data-bind="css: { nav_primary_selected_li: $data.header == $root.chosenMode().header },
				       click: $root.goToMode">
				<!-- 	
					NOTE: all access to object properties are implied,
					notice that I don't have to say "$data.header"
				-->
				<h2 data-bind="text: header"></h2>
				<p data-bind="text: text"></p>
			</li>
		</ul>
		
		
		<!-- SECONDARY NAVIGATION -->
		<ul id="nav_secondary" class="nav" data-bind="foreach: subModes">
			
			
			<li data-bind="css: { nav_secondary_selected_li: $data.header == $root.chosenSubMode().header },
				       click: $root.goToSubMode">
				
				<h2 data-bind="text: header"></h2>
			</li>
		</ul>
		
		<!-- BREAD CRUMBS -->
		<div id="breadcrumbs">
		    
			<!-- Indicate the main page -->
			<span data-bind="with: chosenMode" >
			    <strong data-bind="text:header" ></strong>
			</span>
			
			<!-- CONDITIONAL -->
			 <!-- ko if: $root.chosenSubMode().hasOwnProperty('template') -->
			    <span>&gt;</span>
			    <span data-bind="with: chosenSubMode" >
				<strong data-bind="text:header" ></strong>
			    </span>
			<!-- /ko -->
			
			
		</div>
		
		<!-- CONTENT (Dynamic) -->
		<div id="content" data-bind="	template: {
						    name: displayMode,
						    data: $root.chosenSubMode(),
						    afterRender: postProcessingLogic }">
		</div>
		
		<!-- FOOTER -->
		<div id="footer" style="text-align: center;">
		    <a target="_blank" href="http://validator.w3.org/check?uri=http%3A%2F%2Fpeople.rit.edu%2Fpwwcad%2F"  class="transparentBtn">validate</a>
		</div>

	</div>
	
     <!-- TEMPLATE: ERROR-->
    <script  type="text/html" id="tmpl-error">
	<h2>Error</h2> 
	<p>An Error has occurred.</p>
    </script>
    
    

    
    <!-- TEMPLATE: INFO ABOUT ME -->
    <script  type="text/html" id="tmpl-info-about-me">
	
		<h2>About Me</h2> 

		<img src="images/paulwalter_sm.jpg" style="float: left; margin-right: 1em;"></img>
		
		<p>My name is Paul Walter and I am an lecturer in the Information Technology department for the Rochester Institute of Technology in Croatia</p>

		<p>My research interests are in the areas of Software Engineering (Rational Unified Process and Systems Engineering), Distributed Sensor Networks, Front-end Development, and Data Modeling.</p>

		<p>In my free time I like to camp and bicyle, usually together in one trip.</p>

		<p><a  class="transparentBtn" href="http://acmt.hr">Rochester Institute of Technology in Croatia</a></p>

		
		

    </script>
    
    <!-- TEMPLATE: SCHEDULE -->
    <script type="text/html" id="tmpl-info-schedule">
		<h2>Schedule</h2>

		<!-- from google -->
		<iframe src="https://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=WEEK&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=hhgdae0ldic6uhp10gkvua8hpk%40group.calendar.google.com&amp;color=%23875509&amp;ctz=Europe%2FBelgrade" style=" border-width:0 " width="700" height="600" frameborder="0" scrolling="no"></iframe>

    </script>
    
    <!-- TEMPLATE: Examples:  Web -->
    <script  type="text/html" id="tmpl-examples-web">
	
		<!-- ko with: $root.chosenSubMode() -->

		    <!-- ko foreach: projects -->
		
			<article class="project-article">
			    <h2 data-bind="html: title"></h2>
			    <a  data-bind="attr: { href: base }" style="float: right;" target="_blank">
				<img  data-bind="attr: { src: thumb }"></img>
			    </a>
			    <div data-bind="html: description"></div>
			</article> 
		    <!-- /ko -->
		<!-- /ko -->
	
    </script>
    
     <!-- TEMPLATE: Examples:  Drawings -->
    <script  type="text/html" id="tmpl-examples-drawings">
	<h2>Drawings</h2>
	
	<p>Done with regular pencil on brown paper, with chalk for the highlights.</p>
	
	<!-- ko with: $root.chosenSubMode() -->
	<div style="height:140px; width:630px; overflow:scroll;  white-space: nowrap;">
	    
	    <!-- ko foreach: drawings -->
	    <a data-bind="attr: { href: img, title: caption }" rel="lightbox[box]">
		<img  data-bind="attr: { src: thumb }"></img>
	    </a>
	    <!-- /ko -->
	</div>
	
	<!-- /ko -->
	
    </script>
   
    <!-- TEMPLATE: Examples:  Resume -->
    <script  type="text/html" id="tmpl-resume">
	<!-- JQuery Media Plugin will display this as a PDF -->
	<h2>Resume</h2>
	<a class="media { width:700 height: 600 }" href="assets/pdf/PWalterResume2013.pdf" target="_blank">Download PDF</a> 	
    </script>
    
    <!-- TEMPLATE: Examples:  Contact -->
    <script  type="text/html" id="tmpl-contact">
	
	<!-- 
	    ==============================================================
	    NOTE: From http://www.devblog.co/easy-jquery-ajax-php-contact-form/
	    ==============================================================
	-->
	<h2>Contact</h2>
	
	<form action="php/emailer.php" method="post" id="contact_form">
	    <div>
			<label for="name">Name:</label>
			<input type="text" name="name" id="name" value="" tabindex="1" />
	    </div>
	    <div>
			<label for="email">Email:</label>
			<input type="text" name="email" id="email" value="" tabindex="2" />
	    </div>
	    <div>
			<label for="message">Message:</label>
			<textarea cols="20" rows="3" name="message" id="message"></textarea>
	    </div>
	    <div id="loader">
	 		<label for="submit">&nbsp;</label>
			<input id="submit"  class="blueBtnStyle" type="submit" value="Submit" />
	    </div>
	</form>
    </script>

    <!-- JAVASCRIPTS -->
    <script type="text/javascript" src="javascript/knockout/knockout-2.2.0.js"></script>
    <script type="text/javascript" src="javascript/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="javascript/jquery/jquery.media.js"></script>
    <script type="text/javascript" src="javascript/walterp/walterp-single-page-app-personal-website.js"></script>
    <script type="text/javascript" src="javascript/lightbox/js/lightbox.js"></script>
</body>
</html>
